import { fetchDetailAPI } from "@/apis/list"
import { DetailDataType } from "@/apis/type"
import { Divider, NavBar } from "antd-mobile"
import { useEffect, useState } from "react"
import { useNavigate, useSearchParams } from "react-router-dom"

const Detail = () => {

  const [detail, setDetail] = useState<DetailDataType | null>(null)

  const [searchParams] = useSearchParams()
  const id = searchParams.get('id')
  useEffect(() => {
    const getDetail = async () => {
      try {
        const res = await fetchDetailAPI(id!)
        setDetail(res.data.data)
      } catch (error) {
        throw new Error('fetch detail error')
      }
    }
    getDetail()
  }, [id])
  const navigate = useNavigate()
  const back = () => {
    navigate('/')
  }

  if (!detail) {
    return <div>this is loading</div>
  }
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'right' }}>
        <span style={{ fontSize: '16px', fontWeight: 'bold' }}>{detail.aut_name}</span>
        <img src={detail.aut_photo} alt="无" style={{ height: '45px', width: '45px', borderRadius: '50%', marginLeft: '8px' }} />
      </div>
      <Divider />
      <NavBar onBack={back}>标题：{detail?.title}</NavBar>
      <div style={{ fontSize: '15px' }} dangerouslySetInnerHTML={{
        __html: detail?.content
      }}></div>
    </div>
  )
}

export default Detail